<template>
    <div class="page-card">
        <el-form ref="formRef" :model="dataForm" :rules="rules" label-width="120px">
            <el-form-item label="appid" prop="app_id" required>
                <el-input v-model="dataForm.app_id" style="width: 500px;" />
            </el-form-item>
            <el-form-item label="secret" prop="secret" required>
                <el-input v-model="dataForm.secret" style="width: 500px;" />
            </el-form-item>
            <el-form-item label="token" prop="token">
                <el-input v-model="dataForm.token" style="width: 500px;" />
            </el-form-item>
            <el-form-item label="aes_key" prop="aes_key">
                <el-input v-model="dataForm.aes_key" style="width: 500px;" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit(formRef)">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { getSystemInfo, systemSave } from '@/api/seting'

const dataForm = reactive({
    app_id: '',
    secret: '',
    token: '',
    aes_key: ''
})

const formRef = ref(null)

const rules = reactive({
    appid: [{ required: true, message: '请填写appid', trigger: 'blur' }],
    secret: [{ required: true, message: '请填写secret', trigger: 'blur' }],
})

onMounted(() => {
    getMiniappInfo();
})

function getMiniappInfo() {
    getSystemInfo({
        name: 'wechat_mnp'
    }).then(res => {
        dataForm.app_id = res.result.app_id;
        dataForm.secret = res.result.secret;
        dataForm.token = res.result.token;
        dataForm.aes_key = res.result.aes_key;
    })
}

function onSubmit(formEl) {
    formEl.validate((valid) => {
        if (valid) {
            systemSave({
                name:'wechat_mnp',
                value:dataForm
            }).then(res => {
                if (res.code == 1) {
                    ElMessage.success("保存成功");
                }
            })
        } else {
            return false
        }
    })
}
</script>
<style>

</style>